{% extends "base.html" %}

{% block title %}Your Orders - ShopEasy{% endblock %}

{% block content %}
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">Your Orders</h2>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
            View and manage all your past orders.
        </p>
    </div>
    
    {% if not orders %}
    <div class="px-4 py-12 text-center">
        <i class="fa fa-file-text-o text-5xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900">No orders yet</h3>
        <p class="mt-1 text-sm text-gray-500">
            You haven't placed any orders.
        </p>
        <div class="mt-6">
            <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Browse Products
            </a>
        </div>
    </div>
    {% else %}
    <div class="border-t border-gray-200">
        <ul class="divide-y divide-gray-200">
            {% for order in orders %}
            <li class="px-4 py-6 sm:px-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900">Order #{{ order.id }}</h3>
                        <p class="mt-1 text-sm text-gray-500">
                            Placed on {{ order.created_at.strftime('%B %d, %Y') }}
                        </p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-medium text-gray-900">${{ "%.2f"|format(order.total_amount) }}</p>
                        <p class="mt-1 text-sm text-gray-500">
                            Status: <span class="capitalize">{{ order.status }}</span>
                        </p>
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <a href="/order/{{ order.id }}" class="text-sm text-indigo-600 hover:text-indigo-500">
                        View details
                    </a>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %}
